<template>
<div>
	<home-header ></home-header>
	<home-swiper :list="swiperList"></home-swiper>
	<home-icons :list="iconList"></home-icons>
	<home-recommend :list="recommendList"></home-recommend>
	<home-weekend :list="weekendList"></home-weekend>
</div>
</template>
<script>
import HomeHeader from './components/Header'
import HomeSwiper from './components/Swiper'
import HomeIcons from './components/icons'
import HomeRecommend from './components/Recommend'
import HomeWeekend from './components/Weekend'
import axios from 'axios'
import { mapState } from 'vuex'
export default{
  name: 'home',
  components: {
	  HomeHeader,
	  HomeSwiper,
	  HomeIcons,
	  HomeRecommend,
	  HomeWeekend
  },
  data (){
  	  return {
		  swiperList: [],
		  iconList: [],
		  recommendList: [],
		  weekendList: [],
		  lastCity: []
  	  }
	},
	
	methods: {
		getHomeInfo() {
			axios.get('/api/index.json?city=' + this.city)
			.then(this.getHomeInfoSucc)
		},
		getHomeInfoSucc(res) {
			res = res.data
				if(res.ret && res.data){		//如果后端正确的返回了结果而且res有data
					const data = res.data		//定义一个变量
			/* 	this.city = data.city		//把后端数据data.city赋值给当前city */
											//身体发生变化子组件就会发生变化  把this.city传给上面的city，通过data函数返回传入header子组建
					this.swiperList= data.swiperList
					this.iconList = data.iconList
					this.recommendList=data.recommendList
					this.weekendList=data.weekendList
			}
			console.log(res)
			console.log(res.data.city)
		}
	},
	mounted() {
		this.getHomeInfo()
		this.lastCity = this.city
	},
	computed: {
		...mapState(['city'])
	},
	activated () {			//页面重新显示的时候执行
		if (this.lastCity !== this.city) {
			this.lastCity = this.city
			this.getHomeInfo()
		}
	}
}
</script> 

<style>
</style>
